<!--
ref属性总结：
  1. 被用来给元素或子组件注册引用信息（id的替代者）
  2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
  3. 使用方式：
      1. 打标识：
          ```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
      2. 获取：
          ```this.$refs.xxx```
-->

<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDOM()" ref="but">点我输出上方的DOM元素</button>
    <img src="./assets/logo.png" alt="logo">
    <!-- 第三步：使用组件 -->
    <!-- 其中使用ref 获取到的就是School 这个组件实例对象vc -->
    <School ref="sch"></School>
  </div>
</template>

<script>
// 第一步：引入组件，其中在脚手架里面，后缀.vue写不写都可以
import School from './components/School.vue'

export default {
  name: 'App',
  // 第二步：注册组件
  // components: {
  //   School,
  //   Student,
  // }
  // 使用对象写法
  components: {
    School,
  },
  data() {
    return {
      msg: '欢迎学习Vue'
    }
  },
  methods: {
    showDOM() {
      console.log('@查看vc【VueComponent身上的$ref】', this);
      console.log(this.$refs.title); // 真实的DOM 元素
      console.log(this.$refs.but); // 真实的DOM 元素
      console.log(this.$refs.sch); // School 组件的实例对象【vc】，组件间通信有大用途
    }
  }

}
</script>

<style scoped>

</style>